<template>
  <div class="login-container">
    <el-form

      :model="loginForm"
      class="login-form"
      auto-complete="on"
      label-position="left"
    >
    <div class="title-container">
      <h3 class="title">请假管理</h3>
    </div>
    <el-form-item >
      <el-input v-model="loginForm.account"  placeholder="账号" />
    </el-form-item>
    <el-form-item >
      <el-input v-model="loginForm.password" type="password"  placeholder="密码" />
    </el-form-item>



      <el-button
        size="default"
        :loading="loading"
        type="primary"
        style="width: 100%; margin-bottom: 30px; "
        @click.prevent="handleLogin"
        >登录
      </el-button>


    </el-form>


  </div>
</template>

<script lang="ts" setup>
  // 状态管理依赖
import router from '@/router';
import useStore from '@/store';

import { LoginFormData } from '@/types';  //类似于引用实体
import { reactive, toRefs } from 'vue'


const { user } = useStore();  //这个家伙既有属性，又有行为，登录要经过它

const state = reactive({
  //系统管理员
  // loginForm:{
  //   account: 'admin',
  //   password: '123456'
  // } as LoginFormData,
  //二级部门管理员（大数据）
  // loginForm:{
  //   account: '20180311001',
  //   password: '123456'
  // } as LoginFormData,
  //学生（大数据  软件1 张一）
  // loginForm:{
  //   account: '2021295100101',
  //   password: '123456'
  // } as LoginFormData,
  //辅导员 （大数据 软件1辅导员）20190310098
  loginForm:{
    account: '20190310098',
    password: '123456'
  } as LoginFormData,
  loading: false,
})

 const{
  loginForm,
  loading
 } = toRefs(state)


//登录
function handleLogin() {
      state.loading = true;  //按钮置为等待
      user
        .login(state.loginForm)
        .then(() => {
          console.log("成功了")
          router.push({path:'/'})
          state.loading = false;  //按钮置为正常
        })
        .catch(() => {
          state.loading = false;  //按钮置为正常
          console.log("失败了")
        });
}
</script>

<style lang="scss">

  .login-container {
    .title-container {
      position: relative;
  
      .title {
        font-size: 26px;
        margin: 0px auto 40px auto;
        text-align: center;
        font-weight: bold;
      }
  
    }
  

  

  

  }
  </style>
  
  <style lang="scss" scoped>

  
  .login-container {
    min-height: 100%;
    width: 100%;
    overflow: hidden;

    .title-container {
    position: relative;

    .title {
      font-size: 26px;
      margin: 0px auto 40px auto;
      text-align: center;
      font-weight: bold;
    }
  }
  
    .login-form {
      position: relative;
      width: 520px;
      max-width: 100%;
      padding: 160px 35px 0;
      margin: 0 auto;
      overflow: hidden;
    }
  }
  </style>
